<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>静态人像</title>
		<link rel="stylesheet" href="css/camera.css" />
		<link rel="stylesheet" href="http://static-edu.jsyxx.cn/lib/bootstrap/3.2.0/css/bootstrap.min.css?${" media="screen">
		<link rel="stylesheet" type="text/css" href="css/massed-learn.css" media="screen" />
		<script type="text/javascript" src="js/constants.js"></script>
		<script type="text/javascript" src="http://static.timingbar.cn/loader.js?_v=${V}&lib=jquerys"></script>
		<!--<script type="text/javascript" src="js/camera.js"></script>-->
		<script type="text/javascript" src="js/index2.js"></script>
	</head>

	<body>
		<div class="learn-hint">
			<div class="hint">
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a role="tab" data-toggle="tab" href="#images">图像示例</a>
					</li>
					<li role="presentation">
						<a role="tab" data-toggle="tab" href="#notes">注意事项</a>
					</li>
					<li role="presentation">
						<a role="tab" data-toggle="tab" href="#help">设置帮助</a>
					</li>
				</ul>
				<div class="tab-content">
					<div id="images" role="tabpanel" class="tab-pane hint-img active">
						<ul>
							<li><img src="img/hint-01.gif" width="85" height="119" />
							</li>
							<li><img src="img/hint-02.gif" width="85" height="119" />
							</li>
							<li><img src="img/hint-03.gif" width="85" height="119" />
							</li>
							<li><img src="img/hint-04.gif" width="85" height="119" />
							</li>
							<li><img src="img/hint-05.gif" width="85" height="119" />
							</li>
							<li><img src="img/hint-06.gif" width="85" height="119" />
							</li>
						</ul>
					</div>
					<div id="notes" role="tabpanel" class="tab-pane">
						<ol style="list-style-type:none;">
							<li>
								1.&nbsp;&nbsp;请调整坐姿，使头像位于人脸识别区域内
							</li>
							<li>
								2.&nbsp;&nbsp;视线正对摄像头；
							</li>
							<li>
								3.&nbsp;&nbsp;调节亮度和摄像头焦距使人脸显示清晰；
							</li>
							<li>
								4.&nbsp;&nbsp;环境光线尽可能的均匀，无曝光、欠曝光；
							</li>
							<li>
								5.&nbsp;&nbsp;图像中人的眼镜不反光，并保证双眼可见；
							</li>
							<li>
								6.&nbsp;&nbsp;无墨镜、口罩等物体遮挡面部；
							</li>
							<li>
								7.&nbsp;&nbsp;保证人脸、俯仰角度在+15~-15度之间；
							</li>
						</ol>
					</div>
					<div id="help" role="tabpanel" class="tab-pane hint-help">
						<p>
							如果出现允许提示框可以点击“弹窗设置”按钮在出现窗口中，选中“允许”和“记住”，关闭窗口后，就不会再出现提示允许框
						</p>
						<div class="hint-help-img"><img src="img/hint-set.gif" width="213" height="136" />
						</div>
					</div>
				</div>
			</div>
			<div class="header-img">
				<h2>
					<span class="pull-left">验证区域</span>		
					<span class="pull-right set-btn" ><a id="btn-set" class="btn btn-default btn-md hidden" href="javascript:void(0);" title="设置">设置</a></span>
					<span class="pull-right set-btn" ><a id="btn-capture" class="btn btn-default btn-md hidden" href="javascript:void(0);" onclick="Camera.Static._camera.capture()" title="拍照">拍照</a></span>
					<span class="pull-right set-btn" ><a id="btn-init" class="btn btn-default btn-md" href="javascript:void(0);" onclick="Camera.Static.init()" title="启用">启用</a></span>
				</h2>
				<div class="header-photo-box">
					<img id="user-photo" defaultpic src="img/default-icon-180-240.png" />
				</div>
				<div class="header-photos-bg">
				</div>
				<div class="header-img-bag">
					<div id="camera4validate" class="header-img-box">
					</div>
				</div>
			</div>
		</div>
	</body>

</html>